
import { useState } from 'react';
import store from './redux/store';
import { useDispatch, useSelector } from '../8_source/4_react_redux';
import { changeUserName, fetchUnreadCount } from './redux/slice';

export default function ProfileSetting() {
    const [username, setUsername] = useState("");
    const dispatch = useDispatch();
    const usernameProps = useSelector(state => state.username);
    const loading = useSelector(state => state.loading);

    return (
        <div className='profile-setting'>
            个人信息设置页面：<br />
            <span style={{ marginRight: '10px' }}>{usernameProps}</span>

            <input placeholder="新用户名"
                value={username}
                onChange={e => setUsername(e.target.value)}
            />
            <button onClick={e => {
                dispatch(changeUserName(username));
                setUsername('');
            }}>修改</button>

            <br />
            由后端耗时2s获取未读消息条数：
            <button onClick={() => {
                store.dispatch(fetchUnreadCount());
            }}
            >{loading ? 'loading...' : '延时获取'}</button>

        </div>
    )
}